import React, { Component } from 'react'
import { Grid } from '@ant-design/react-native';
import { View, Text, Image } from 'react-native'
import styles from './Top10_style'
import { ICook } from '@/cookbook';
import { get } from '@/src/utils/http'
import { inject, observer } from 'mobx-react'
import { Consumer, navigationContext } from '@/src/context/navigation'

interface Props {
  store?: any
}
interface State {
  list: Array<ICook>
}
@inject('store')
@observer
class Top10 extends Component<Props, State> {

  static contextType = navigationContext;

  state = {
    list: []
  }

  async componentDidMount() {
    // let list = await get('http://192.168.2.1:8088/hotlist')
    // this.setState({
    //   list
    // })
  }

  renderTopItem(item: any, index: number) {
    return (
      <View style={styles.top10ItemContainer}>
        <View style={styles.top10ImgContainer}>
          <Image style={styles.top10Imag} source={{ uri: item.img }}></Image>
        </View>

        <View style={{ display: 'flex' }} >
          <Text style={styles.title}>{item.name}</Text>
          <Text style={styles.desc}> {item.all_click} {item.favorites}</Text>
        </View>


      </View>
    )

  }

  _handlePress = (navigation, dataitem) => {
    // console.log(navigation, dataitem)
    navigation.push('Detail', { id: dataitem.id, title: dataitem.name })
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.top10Head}>
          <Text style={styles.top10HeadText}>精品好菜</Text>
        </View>
        <Grid columnNum={2}
          data={this.props.store.list.slice(0, 10)}
          renderItem={this.renderTopItem}
          onPress={(dataitem) => {

            this._handlePress(this.context.navigation, dataitem)
          }}
        >
        </Grid>
      </View>
    )
  }
}

export default Top10; 